<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="shortcut icon" href="#">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>

<div class="container">
    <div class="panel panel-primary">

        <div class="panel-heading">
            <h1 class="text-center">学生信息管理系统</h1>
        </div>

        <div class="panel-body">

            <form class="form-horizontal">

                <!-- 警告框 -->
                <div class="alert alert-warning alert-dismissible hide" role="alert">
                    <button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong>错误：</strong> 用户名或密码错误！
                </div>

                <!-- 表单 -->
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" placeholder="请输入您的用户名...">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" placeholder="请输入您的密码...">
                    </div>
                </div>

                <div class="form-group">
                    <label for="imageCode" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="imageCode" placeholder="请输入验证码...">
                    </div>
                    <div class="col-sm-1">
                        <img src="img/timg.jpg" style="height: 34px; vertical-align: middle; border: none;" class="img-responsive" alt="验证码">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">用户类型</label>
                    <div class="col-sm-10">

                        <label class="radio-inline">
                            <input type="radio" name="usertype" value="student">学生
                        </label>

                        <label class="radio-inline">
                            <input type="radio" name="usertype" value="teacher">教师
                        </label>

                        <label class="radio-inline">
                            <input type="radio" name="usertype" value="admin"> 管理员
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-info" id="loginBtn">登陆</button>
                        <button type="reset" class="btn btn-warning">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script>
    $(function () {
        $("#loginBtn").click(function () {
            $.post(
                "loginProgress", // 参数1：url
                {               // 参数2：传递的数据
                    username: $("#username").val(),
                    password: $("#password").val()
                },
                function (result) { // 参数3：回调函数
                    var row = parseInt(result);
                    if (row > 0) {
                        window.location.href = "manage.jsp";
                        $(".alert-warning").addClass("hide");
                    } else
                        // alert("用户名或密码错误...");
                        $(".alert-warning").removeClass("hide");
                }
            );
        });

        $("#username").blur(function () {
            var username = $("#username").val();
            if (username == "") {
                $(".alert-warning").html("<strong>警告：</strong>用户名不能为空！");
                $(".alert-warning").removeClass("hide");
            } else {
                $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
                $(".alert-warning").addClass("hide");
            }
        });

        $("#password").blur(function () {
            var password = $("#password").val();
            if (password == "") {
                $(".alert-warning").html("<strong>警告：</strong>密码不能为空！");
                $(".alert-warning").removeClass("hide");
            } else {
                $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
                $(".alert-warning").addClass("hide");
            }
        });

        $("#imageCode").blur(function () {
            var imageCode = $("#imageCode").val();
            if (imageCode == "") {
                $(".alert-warning").html("<strong>警告：</strong>验证码不能为空！");
                $(".alert-warning").removeClass("hide");
            } else if (imageCode != "uwv6") {
                $(".alert-warning").html("<strong>警告：</strong>验证码错误！");
                $(".alert-warning").removeClass("hide");
            } else {
                $(".alert-warning").html("<strong>错误：</strong>用户名或密码错误！");
                $(".alert-warning").addClass("hide");
            }
        });
    })

</script>
</body>
</html>